import { ref } from 'vue';

import { message } from 'ant-design-vue';
import { defineStore } from 'pinia';

import {
  deleteThemesFileBlockWidgetArray,
  postThemesFileBlockWidgetArray,
  postThemesFileSetting,
  postThemesWidgetSetting,
  postThemesWidgetSort,
} from '#/api/admin/theme';

interface ThemeInfoType {
  file_id?: any;
  theme?: string;
  block_name?: string;
  widget_id?: string;
  var?: string;
  admin_content_lang?: string;
  file?: string;
}
export const useThemeStore = defineStore('theme', () => {
  // 默认配置
  const defaultThemeInfo = {
    file_id: '',
    theme: '',
    block_name: '',
    widget_id: '',
    var: '',
    admin_content_lang: '',
    file: '',
  };

  const themeInfo = ref<ThemeInfoType>(defaultThemeInfo);

  const setThemeInfo = (info: ThemeInfoType) => {
    themeInfo.value = Object.assign({}, themeInfo.value, info);
  };
  const getThemeInfo = () => {
    return themeInfo.value;
  };

  const $reset = () => {
    themeInfo.value = defaultThemeInfo;
  };

  /** 模板文件块控件数组数据添加编辑提交保存 */
  const onPostThemesFileBlockWidgetArray = async (
    item: any[],
    item_index: string,
  ) => {
    const { msg } = await postThemesFileBlockWidgetArray({
      item,
      item_index,
      file_id: themeInfo.value?.file_id,
      var: themeInfo.value?.var || '',
      widget_id: themeInfo.value?.widget_id || '',
      admin_content_lang: 'zh-cn',
      block_name: themeInfo.value?.block_name || '',
    });
    message.success(msg);
  };

  /** 模板文件块控件数组数据添加编辑提交保存 */
  const onDeleteThemesFileBlockWidgetArray = async (item_index: string) => {
    const { msg } = await deleteThemesFileBlockWidgetArray({
      item_index,
      file_id: themeInfo.value?.file_id,
      var: themeInfo.value?.var || '',
      widget_id: themeInfo.value?.widget_id || '',
      admin_content_lang: 'zh-cn',
      block_name: themeInfo.value?.block_name || '',
    });
    message.success(msg);
  };

  /** 模板设置提交 */
  const onPostThemesFileSetting = async (files: any) => {
    const { msg } = await postThemesFileSetting(themeInfo.value?.theme || '', {
      files,
      admin_content_lang: themeInfo.value?.admin_content_lang,
    });
    message.success(msg);
  };

  /** 组件排序 */
  const onPostThemesWidgetSort = async (sortData: object) => {
    await postThemesWidgetSort(
      themeInfo.value?.admin_content_lang || '',
      sortData,
    );
  };

  /** 模板自由控件设置提交保存 */
  const onPostThemesWidgetSetting = async (widget: object) => {
    const { msg } = await postThemesWidgetSetting({
      widget,
      admin_content_lang: themeInfo.value?.admin_content_lang || '',
      file_id: themeInfo.value.file_id,
      widget_id: themeInfo.value.widget_id || '',
      block_name: themeInfo.value.block_name || '',
    });
    message.success(msg);
  };

  return {
    setThemeInfo,
    getThemeInfo,
    onPostThemesFileBlockWidgetArray,
    onDeleteThemesFileBlockWidgetArray,
    onPostThemesFileSetting,
    onPostThemesWidgetSort,
    onPostThemesWidgetSetting,
    $reset,
  };
});
